import './register.css'
import { Button, Checkbox, Form, Input, message, Space } from "antd"
import { useState, useEffect } from "react";
import { getLogin } from "../../tools/ajax";
import { useNavigate } from "react-router-dom"
export default () => {
    const navigate = useNavigate()
    const [messageApi, contextHolder] = message.useMessage();
    const onFinish = async (values) => {
        console.log('Success:', values);
        var { data: res } = await getLogin({
            "userName": values.username,
            "password": values.password,
        });
        console.log(res.code);
        if (res.code) {
            console.log(res.code);
            localStorage.setItem("setToken", res.token);
            messageApi.open({
                type: 'success',
                content: '登录成功' + res.userName,
            });
            setTimeout(() => {
                navigate("/"); //没有历史记录
            }, 1000);
        } else {
            messageApi.open({
                type: 'error',
                content: '用户名或密码错误',
            });
        }
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className="register">
            {contextHolder}
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        { required: true, message: '请输入用户名' },
                        { pattern: /^[\w\u4e00-\u9fa5]{2,8}$/, message: '只能包含数字、字母、下划线、汉字6-12位' }]
                    }
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        { required: true, message: '请输入密码' },
                        { pattern: /^\w{6,12}$/, message: '只能包含数字、字母、下划线6-12位' }
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit" >
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div >
    )
}
